<!-- 登录-组件模板 -->
<template>
	<view class="container flexDom flexColumn">
		<view class="welcome">
			<view>
				<view class="welcomeTitle marginBottom30">Hello</view>
				<view class="huanyDoms fontSize18 marginBottom30">欢迎加入康宏！</view>
			</view>
		</view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper flexOne">
			<view class="formTitle fontSize18">{{isYzm ? '短信登录':'密码登录'}}</view>
			<view class="input-content marginBottom60">
				<view class="input-item">
					<input 
						type="text" 
						:value="username" 
						placeholder="请输入您的账号"
						maxlength="11"
						data-key="username"
						@input="inputChange"
					/>
				</view>
				<view v-if="isYzm" class="input-item">
					<input 
						type="mobile" 
						:value="password" 
						placeholder="请输入验证码"
						placeholder-class="input-empty"
						maxlength="20"
						data-key="password"
						@input="inputChange"
						@confirm="toLogin"
					/>
					<template v-if="username.length==11">
						<text v-if="currTime" class="getYanzm colorGreen" @click.stop="getYanzhengMa()">获取验证码</text>
						<text v-else class="getYanzm colorGreen">稍等{{djTime}}秒</text>
					</template>
				</view>
				<view v-else class="input-item">
					<input 
						type="password" 
						:value="password" 
						data="passworedtype"
						placeholder="请输入您的密码"
						placeholder-class="input-empty"
						maxlength="20"
						data-key="password"
						@input="inputChange"
						@confirm="toLogin"
					/>
				</view>
			</view>
			<view class="input-content marginBottom40">
				<button class="blueBtn" @click="toLogin()" :disabled="logining">登录</button>
			</view>
			<view class="ysfwDoms textCenter">
				<radio-group @change="radioClk">
					<label class="radio">
						<radio value="selected"/>
							<text>记住账号</text>
						<!-- <text class="checkDoms">
							<text>已了解</text>
							<text class="colorBlue" @click.stop="$RouterTo('/pages/serviceArgeement/index')">《用户协议》</text>
							<text>和</text>
							<text class="colorBlue" @click.stop="$RouterTo('/pages/privacyPolicy/index')">《隐私政策》</text>
							<text>并且同意该协议</text>
						</text> -->
					</label>
				</radio-group>
			</view>
			<!-- <view v-if="isPoxy" class="textCenter colorBlue" @click="isYzm=!isYzm;password='';">{{isYzm ? '密码登录':'短信登录'}}</view> -->
			
			<view class="register-section colorB9">
				<view v-if="isPoxy" class="colorBlue">测试环境dev</view>
				<view>© 2019-2021 nemoskincare.com 版权所有</view>
				<view>网站备案号：<a id="btn-login-dark" href="http://beian.miit.gov.cn"><font color="#6495ED">苏ICP备19052900号</font></a></view>
			</view>
		</view>
	</view>
</template>

<!-- 组件核心js -->
<script>
	// 加载vuex
	import { mapMutations } from 'vuex';
	// 加载，全局设置
	import Setting from "../../utils/setting";
	
	export default{
		data(){
			return {
				isPoxy: Setting.constant.IS_PROXY, // 如果是代理，就是本地测试环境，如果不启用代理，就是正式环境，不需要密码登录
				isYzm: false,       // 默认验证码登录
				isChecked: false,  // 默认不选择
				username: '',   // 手机号码 15150110958
				password: '',   // 验证码 8888
				// password: '',   // 密码 8888
				logining: false,
				time: null,  // 定时变量
				djTime: 60,  // 倒计时，秒
				currTime: true  // 默认可用下发验证码
			}
		},
		onLoad(){
			// 获取登录状态
			let isLogin = uni.getStorageSync(Setting.constant.WYD_LOGIN) || false;
			// console.log("isLogin = ", isLogin);
			// 如果已经登录，就直接跳转首页
			if(isLogin) {
				let count = uni.getStorageSync(Setting.constant.LOGIN_COUNT) || "";
				let psd = uni.getStorageSync(Setting.constant.LOGIN_PSD) || "";
				if(count && psd) {
					// 自动登录
					this.autoLogin(count, psd);
				}
			}
			// console.log("this.$store == ", this.$store);
			// 获取设备信息
			// this.getDeviceInfo();
		},
		methods: {
			...mapMutations(['login', 'setDeviceInfo']),
			
			/**
			 * 获取设备信息-函数
			 */
			getDeviceInfo(){
				let info = uni.getDeviceInfo();
				this.setDeviceInfo(JSON.stringify(info));
				// console.log("设备信息：", info);
				// 赋值本地
				uni.setStorage({
					key: Setting.constant.D_BRAND,
					data:info.brand
				});
				uni.setStorage({
					key: Setting.constant.D_MODEL,
					data:info.model
				});
				uni.setStorage({
					key: Setting.constant.D_DEVICEID,
					data:info.deviceId
				});
				uni.setStorage({
					key: Setting.constant.D_PALTFORM,
					data:info.platform
				});
				uni.setStorage({
					key: Setting.constant.D_SYSYTEM,
					data:info.system
				});
			},
			
			inputChange(e){
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
				// console.log("您的手机：", key, this.username);
				if(this.isYzm && key == 'username') {
					if(this.username.length == 11) {
						setTimeout(()=> {
							// 验证码-时间
							this.getVerifycode();
						},200)
					}
				}
			},
			
			/**
			 * 根据电话号码，获取是否开启验证码-函数
			 */
			getVerifycode() {
				if(this.username) {
					this.$myHttps(this.$apiNames.SMS_VERIFY_CODE, { username: this.username }).then(res => {
						if(res.code == 200) {
							// console.log("获取验证码时间：", res);
							// 如果是0，就是允许发送验证码
							if(res.data == 0) {
								// 开启验证码，下发按钮
								this.currTime = true;
								this.djTime = 60; // 默认
							} else {
								// 关闭验证码，下发按钮
								this.currTime = false;
								// 开启倒计时
								this.djTime = res.data;
								// 清楚计时器-首先清理
								clearTimeout(this.time);
								// 倒计时开始
								this.setTime();
							}
						} else {
							this.$Msg(res.msg ? res.msg : "验证码错误，请联系管理员~");
						}
					});
				} else {
					this.$Msg("请输入您的手机号码~");
				}
			},
			
			/**
			 * 获取url的参数-函数
			 */
			getParams() {
				let URL = window.location.href;
				let url = URL.split("?")[1];
				const urlSearchParams = new URLSearchParams(url);
				const params = Object.fromEntries(urlSearchParams.entries());
				return params;
			},
			
			/**
			 * 选中，我已阅读并同意条款-事件
			 */
			radioClk(e) {
				// console.log("dddd ==", e.detail);
				// 赋值
				this.isChecked = e.detail.value ? true : false;
			},
			
			navBack(){
				uni.navigateBack();
			},
			
			toRegist(){
				this.$Msg('去注册');
			},
			
			/**
			 * 获取验证码-函数
			 * */
			getYanzhengMa() {
				if(this.username) {
					this.$myHttps(this.$apiNames.SMS_SEND, { username: this.username }).then(res => {
						// console.log("获取验证码时间：", res);
						if(res.code == 200) {
							// 打开计时器
							this.currTime = false;
							// 倒计时开始
							this.setTime();
						} else {
							this.$Msg(res.msg ? res.msg : "验证码错误，请联系管理员~");
						}
					});
				} else {
					this.$Msg("请输入您的手机号码~");
				}
			},
			
			/**
			 * 倒计时-函数
			 */
			setTime(){
				// 开始计时
				this.time = setTimeout(() => {
					this.djTime--;
					if(this.djTime > 0) {
						this.setTime();
					} else {
						// 清楚计时器
						clearTimeout(this.time);
						// 恢复定时器
						this.djTime = 60;
						// 继续下发验证码
						this.currTime = true;
					}
				},1000);
			},
			
			/**
			 * 登录成功-回调函数
			 */
			commLogin(res) {
				if(res.currentUser) {
					// 存在全局变量
					this.login(res.currentUser);
					// 跳转-首页
					this.$RouterTo('/pages/index/index');
				} else {
					// 提示信息
					this.$Msg("没有用户数据，请联系管理员！");
				}
				// 开始按钮
				this.logining = false;
			},
			
			/**
			 * 【自动登录】按钮-事件
			 */
			autoLogin(username, password) {
				let urls = this.$apiNames.KH_LOGIN;
				urls += "?username=" + username;
				urls += "&password=" + password;
				this.$myHttps(urls).then(res => {
					if(res.code == 0) {
						// console.log("自动登录信息：", res);
						// 登录成功回调
						this.commLogin(res);
					}
				})
			},
			
			/**
			 * 【登录】按钮-事件
			 */
			toLogin() {
				// 是否选中-我已阅读并同意条款
				/* if(!this.isChecked) {
					this.$Msg("请选择同意《服务协议》和《隐私政策》~");
					this.logining = false;
					return;
				} */
				this.logining = true;
				const { username, password } = this;
				// 数据验证模块
				if(!username) {
					this.$Msg("请输入您的账号~");
					this.logining = false;
					return;
				}
				// 如果是【验证码-登录】
				if(this.isYzm) {
					if(!password) {
						this.$Msg("请输入验证码~");
						this.logining = false;
						return;
					}
				} else {
					if(!password) {
						this.$Msg("请输入您的密码~");
						this.logining = false;
						return;
					}
				}
				// 数据
				const sendData = {
					username,
					password
				};
				// 默认，验证码登录
				let urls = this.$apiNames.SMS_LOGIN;
				// 如果是【密码登录】
				if(!this.isYzm) {
					urls = this.$apiNames.KH_LOGIN;
					urls += "?username=" + username;
					urls += "&password=" + password;
				}
				// 请求登录-api
				this.$myHttps(urls, sendData).then(res => {
					// console.log("请求登录：", res);
					if(res.code == 0) {
						//缓存用户登陆状态
						uni.setStorage({
						    key: Setting.constant.LOGIN_COUNT,  
						    data: username  
						});
						//缓存用户登陆状态
						uni.setStorage({
						    key: Setting.constant.LOGIN_PSD,  
						    data: password  
						});
						// 登录成功回调
						this.commLogin(res);
					} else {
						this.$Msg(res.msg);
						this.logining = false;
					}
				});
			}
		},

	}
</script>

<!-- 当前页面css -->
<style lang='scss' scoped>
	.container{
		background: $wyd-color-green;
		position:relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		.ysfwDoms {
			margin: 60upx 20upx 20upx;
		}
	}
	.wrapper{
		position:relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
		border-radius: 40upx 40upx 0 0;
		.formTitle {
			margin: 60upx;
			color: #3C3C3C;
			font-size: 40upx;
			font-weight: 500;
		}
		.checkDoms {
			color: #B9B9B9;
		}
	}
	.welcome{
		margin: 160upx 60upx 80upx;
		position:relative;
		color: white;
		.welcomeTitle {
			font-family: 'Aharoni Bold';
			font-size: 90upx;
			text-shadow: 1px 0px 1px #dddddd;
		}
		.huanyDoms {
			text-align: left;
			font-size: 42upx;
		}
	}
	.colorB9 {
		color: #B9B9B9;
	}
	.input-content{
		padding: 0 60upx;
		position: relative;
	}
	.input-item{
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $wyd-bg-from;
		height: 92upx;
		border-radius: 8upx;
		margin-bottom: 50upx;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height: 50upx;
			line-height: 56upx;
			font-size: $uni-font-size-sm + 2px;
			color: $uni-text-color;
		}
		input{
			height: 60upx;
			font-size: $uni-font-size-base + 2px;
			color: $uni-text-color;
			width: 100%;
		}	
	}
	.getYanzm {
		display: inline-block;
		position: absolute;
		right: 35px;
		border-radius: 3px;
		padding: 4px 10px;
	}
	.register-section{
		position:absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		text-align: center;
		text{
			margin-left: 10upx;
		}
	}
	::v-deep uni-radio{
		vertical-align: bottom;
	}
	::v-deep uni-radio .uni-radio-input {
		border-radius: 8upx;
	}
	::v-deep .uni-radio-input.uni-radio-input-checked {
		background: $wyd-color-green !important;
		border-color: $wyd-color-green !important;
	}
 </style>